<script>
import TaskList from "@/components/views/task/TaskList.vue";
export default {
  name: "TasGropkList",
  components: {TaskList},
  comments:[TaskList],
  created(){
    //初始化表格数据
    this.init_table_data();
  },
  data() {
    return {
      tableData: [],
      page: {
        pageNow: 1,
        pageSize: 7,
        total: 0
      },
      groupId:'',
      groupName:'',
      show_groups:true,
    }
  },
  methods:{
    //初始化表格数据
    async init_table_data(){
        const res = await this.$http.get("/taskGrops/get_grops",{params:this.page});
        this.tableData = res.data.data.records;
        this.page.total = res.data.data.total;
    },

    del_row(row){
      this.$confirm('此操作将永久删除该组中所有未完成任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () =>  {
        //确认删除
         const res = await this.$http.get('taskGrops/del_group?groupId='+row.id);

        if(res.data.data){
          this.$message.success("恭喜，删除成功！");
          //刷新页面
          this.init_table_data();
        }else{
          //已完成任务无法删除！
          this.$message.error(res.data.errMsg);
        }
      }).catch(() => {
        this.$message.error("已取消删除！！！");
      });
    },

    editor(row) {
      this.groupId = row.id;
      this.groupName = row.gropName;
      this.show_groups = false;
    },

    sizeChange(val){
      this.page.pageSize = val;
      this.init_table_data();
    },

    pageChange(val){
      this.page.pageNow = val;
      this.init_table_data();
    },

    back2group(){
      this.show_groups = true;
      this.init_table_data();
    }
  }
}
</script>

<template>
  <div>
<!-------------------------------- 任务组列表---------------------------------------------->
    <div v-if="show_groups">
        <!-------------------------------------------导航组件------------------------------------------------------------->
        <el-row>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>任务列表</el-breadcrumb-item>
          </el-breadcrumb>
        </el-row>
        <!-------------------------------------------任务组列表卡片------------------------------------------------------------->
        <el-card  class="box-card" style="margin-top: 20px">


          <!-------------------------------------------表格组件------------------------------------------------------------->
          <el-row >
            <el-table
                :data="tableData"
                style="width: 100%">

              <el-table-column
                  type="index"
                  align="center"
                  min-width="20">
              </el-table-column>

              <el-table-column
                  prop="gropName"
                  label="任务名称"
                  min-width="20">
              </el-table-column>

              <el-table-column
                  prop="accCount"
                  label="用户数"
                  align="center"
                  min-width="10">
                <template slot-scope="scope">
                  {{scope.row.accCount}} 人
                </template>
              </el-table-column>


              <el-table-column
                      prop="createTime"
                      label="创建日期"
                      align="center"
                      min-width="15"
              >
                <template slot-scope="scope">
                  {{String(scope.row.createTime).substr(0,10)}}
                </template>
              </el-table-column>

              <el-table-column
                  prop="progress"
                  label="完成进度"
                  align="center"
                  min-width="18"
              >
                <template slot-scope="scope">
                  <el-progress v-if="scope.row.progress<100" :percentage="scope.row.progress"></el-progress>
                  <el-progress v-if="scope.row.progress==100" :percentage="scope.row.progress" status="success"></el-progress>
                </template>
              </el-table-column>

              <el-table-column
                  prop="state"
                  label="状态"
                  align="center"
                  min-width="17"
              >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.state=='1'" effect="dark" type="primary" disable-transitions>进行中</el-tag>
                  <el-tag v-if="scope.row.state=='2'" effect="dark" type="success" disable-transitions>已完成</el-tag>
                </template>

              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  align="center"
                  min-width="15">
                <template slot-scope="scope">
                  <el-button @click="editor(scope.row)" type="primary" size="small" icon="iconfont icon-chakanxiangqing2" circle></el-button>
                  <el-button @click="del_row(scope.row)" type="danger" icon="iconfont icon-qingkong" size="small" circle></el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-------------------------------------------分页组件------------------------------------------------------------->
            <el-pagination
                @current-change="pageChange"
                @size-change="sizeChange"
                :current-page="page.pageNow"
                :page-sizes="[7, 15, 20]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 20px;float:right"
                :total="page.total">
            </el-pagination>

          </el-row>
        </el-card>
    </div>
<!-------------------------------- 任务详情列表---------------------------------------------->
    <TaskList v-if="!show_groups" :groupId="groupId" :gName="groupName" @backtogroup="back2group"></TaskList>
  </div>
</template>

<style scoped>

</style>